<template>
    <view class="live-page">
        <view class="search-item">
            <input class="search-item__input" confirm-type="search" placeholder="搜索你感兴趣的..." placeholder-style="color:#B2B2B2" />
            <image class="search-item__icon" src="../../static/images/search.png" alt="" />
        </view>
        <view class="op-item">
            <image class="op-item__img" src="/static/images/live/直播1.png" mode="" />
            <view class="op-item__title">宋词中国·世界开封”“老家河南 黄河之礼”2020 中国·开封国际文旅创意设计季</view>
            <view class="op-item__data">
                <view class="op-item-poster">
                    <image class="op-item-poster__icon" src="/static/images/live/logo .png"></image>
                    <view class="op-item-poster__label">开封文旅局</view>
                </view>
                <view class="op-item-viewer">
                    <image class="op-item-viewer__icon" src="/static/images/live/观看.png"></image>
                    <view class="op-item-viewer__label">320</view>
                </view>
            </view>
        </view>
        <view class="video-list">
            <template v-for="item in list">
                <VideoListItem :item="item" :isShowLike="false" :key="item.id" @play="onPlay"></VideoListItem>
            </template>
        </view>
    </view>
</template>

<script>
import VideoListItem from '@/components/videoListItem/videoListItem.vue'

export default {
    name: 'live-page',
    components: {
        VideoListItem,
    },
    data() {
        return {
            list: [
                {
                    id: 1,
                    img: '/static/images/live/1.png',
                    tit: '开封三部大戏即将亮相省 戏剧大赛舞台',
                    addres: '开封市文旅局',
                    like: '105',
                    tag: 1,
                },
                {
                    id: 2,
                    img: '/static/images/live/2.png',
                    tit: '我市“河南省豫剧名家面对 面”首场讲座',
                    addres: '开封市文旅局',
                    like: '105',
                    tag: 2,
                },
                {
                    id: 3,
                    img: '/static/images/live/3.png',
                    tit: '“盛情开封·拥抱郑州”开封 文旅（郑州） 推介会隆...',
                    addres: '开封市文旅局',
                    like: '105',
                },
                {
                    id: 4,
                    img: '/static/images/live/4.png',
                    tit: '中秋假期开封全市接待游 客48.04万人次',
                    addres: '开封市文旅局',
                    like: '105'
                },
                {
                    id: 5,
                    img: '/static/images/live/5.png',
                    tit: '《现代豫剧之父樊粹庭画 传》一书出版',
                    addres: '开封市文旅局',
                    like: '105',
                    tag: 1,
                },
                {
                    id: 6,
                    img: '/static/images/live/6.png',
                    tit: '开封三部大戏即将亮相省 戏剧大赛舞台',
                    addres: '开封市文旅局',
                    like: '105',
                    tag: 1,
                },
            ],
        };
    },
    methods:{
        onPlay(item){
            console.log(item)
            if(item.tag==1){
                uni.navigateTo({
                     url: '/pages/liveWaiting/liveWaiting'
                });
            }else{
                uni.navigateTo({
                     url: '/pages/liveWaiting/liveWaiting'
                });
                // uni.navigateTo({
                //      url: '/pages/liveNow/liveNow'
                // });
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.live-page {
    padding: 30upx;
}

.search-item {
    height: 60upx;
    padding: 20upx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f4f4f4;
    &__icon {
        width: 32upx;
        height: 32upx;
    }
}

.op-item {
    margin: 30upx 0;
    &__img {
        width: 100%;
        height: 400upx;
    }
    &__title {
        margin: 20upx 0;
        font-family: PingFang-SC-Medium;
        font-size: 32upx;
        word-break: break-all;
        color: #333333;
    }
    &__data {
        display: flex;
        justify-content: space-between;
    }
}

.op-item-poster {
    display: flex;
    align-items: center;
    &__icon {
        width: 26upx;
        height: 26upx;
        flex-shrink: 0;
    }
    &__label {
        font-size: 28upx;
        color: #676767;
    }
}

.op-item-viewer {
    text-align: center;
    &__icon {
        width: 30upx;
        height: 20upx;
        flex-shrink: 0;
    }
    &__label {
        font-size: 24upx;
        color: #676767;
    }
}

.video-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
</style>